<script setup>

import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {computed, ref} from "vue";

import http from "@/request/Http.js";

//组件映射
const componentMap = {
  user: User,
  password: Password,
  delete: Delete
}
const currentComponent = computed(() => {
  return componentMap[activeIndex.value] || User
})

//当前对象实体
const userInfo = ref({})

//=========菜单========
//激活菜单
const activeIndex = ref('user')
//菜单切换方法
const handleSelect = (index) => {
  activeIndex.value = index
}


//========上传图片======
//上传前
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('图片格式必须是 JPG/PNG!')
    return false
  }
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}
//上传头像方法
const handlerUpload = async (options) => {
// options 对象包含了文件信息，通过 options.file 可以获取到文件对象
  const file = options.file
  console.log('即将上传的文件:', file)

  // 创建 FormData 对象，用于发送文件
  const formData = new FormData()
  formData.append('file', file)

  // 使用 Axios 发送请求
  try {
    const response = await http.post('/userinfo/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    // 根据后端返回的数据处理成功逻辑
    userInfo.value.imageUrl = "http://localhost:8848/api/" + response.data
    ElMessage.success('头像上传成功！')

  } catch (error) {
    // 处理上传失败
    console.error('上传失败:', error)
    ElMessage.error('头像上传失败，请稍后再试。')
  }
}
//上传成功
const handleAvatarSuccess = (response, uploadFile) => {

}


</script>

<template>
  <!-- 布局容器 一行连列-->
  <el-row :gutter="20" :justif="'center'" style="height: 100vh; padding: 1rem">
    <el-col :span="8">
      <!--        左列  用户信息栏-->
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header" style="width: 100%; display: flex;
             justify-content: center; align-content: center">
            <span>个人信息</span>
          </div>
        </template>

        <!--          卡片主体内容区域-->
        <!--            第一行 头像-->
        <el-upload
            :before-upload="beforeAvatarUpload"
            :http-request="handlerUpload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            class="avatar-uploader"
        >
          <img v-if="userInfo.imageUrl" :src="userInfo.imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>

      </el-card>
    </el-col>
    <!--      右列-->
    <el-col :span="16">
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
          <el-menu-item index="user">
            <span slot="title">基本信息</span>
          </el-menu-item>
          <el-menu-item index="password">
            <span slot="title">修改密码</span>
          </el-menu-item>
          <el-menu-item index="delete">
            <span slot="title">账号管理</span>
          </el-menu-item>
        </el-menu>
        <!-- 动态组件显示区域 -->
        <div class="content-area">
          <component :is="currentComponent"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.avatar-uploader .avatar {
  border-radius: 50%;
}
</style>